import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';
import Pagination from 'rc-pagination';
import Datetime from 'react-datetime';
import {Spin} from 'antd';

import Store from './store.js';
import './index.less';

//component
import SetHelmet from 'components/widgets/SetHelmet';
import Empty from "../../widgets/Empty/Empty";
import ReIcon from 'components/widgets/ReIcon';
import ReTextField from 'components/widgets/ReTextField';
import ReButton from 'components/widgets/ReButton';
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'OrdersManage';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});
        this.years = $$.SEM.ARTWORK_ALL_YEAR_LIST;
        this.monthList = [
            {value: '', label: '全部'},
            {value: 1, label: '一月'},
            {value: 2, label: '二月'},
            {value: 3, label: '三月'},
            {value: 4, label: '四月'},
            {value: 5, label: '五月'},
            {value: 6, label: '六月'},
            {value: 7, label: '七月'},
            {value: 8, label: '八月'},
            {value: 9, label: '九月'},
            {value: 10, label: '十月'},
            {value: 11, label: '十一月'},
            {value: 12, label: '十二月'},
        ];


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    render() {
        return (
            <div className="orin-s-ordersmanage-root">
                <SetHelmet title='订单管理'/>
                <div className="header-wrapper">订单管理</div>
                <div className="fix-wrapper">
                    <div className="center-manage-wrapper">
                        <div className="search-wrapper">
                            <div className="line-wrapper line3">
                                <div className="time-input">
                                    <Datetime value={this.store.startTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '开始时间'}}
                                              onChange={(e) => this.store.startTimeChange(e)}/>
                                    {
                                        !!this.store.startTime &&
                                        <span className="close-right" onClick={() => this.store.clearStartTime()}>
                                            <ReIcon className='close-btn' icon="tubiao06"/>
                                        </span>
                                    }
                                </div>
                            </div>
                            <div className="line-wrapper line3">
                                <div className="time-input">
                                    <Datetime value={this.store.endTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '结束时间'}}
                                              onChange={(e) => this.store.endTimeChange(e)}/>
                                    {
                                        !!this.store.endTime &&
                                        <span className="close-right" onClick={() => this.store.clearEndTime()}>
                                            <ReIcon className='close-btn' icon="tubiao06"/>
                                        </span>
                                    }
                                </div>
                            </div>
                            <div className="btn" onClick={() => this.store.searchTime()}>搜索</div>
                            <div className="line-wrapper">
                                <ReTextField
                                    isLabel={false}
                                    type="text"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.nameChange(v)}
                                    errorText={'' ? 'error' : ''}
                                    searchIcon={true}
                                    searchHandler={() => this.store.search()}
                                    closeIcon={true}
                                    closeHandler={() => this.store.closeNameHandle()}
                                    value={this.store.nickName}
                                    placeholder={'搜索用户名'}
                                    onKeyDown={(e) => this.store.nameInput(e)}/>
                            </div>
                            <div className="line-wrapper">
                                <ReTextField
                                    isLabel={false}
                                    type="number"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.phoneChange(v)}
                                    errorText={'' ? 'error' : ''}
                                    searchIcon={true}
                                    searchHandler={() => this.store.search()}
                                    closeIcon={true}
                                    closeHandler={() => this.store.closePhoneHandle()}
                                    value={this.store.phone}
                                    placeholder={'输入手机号'}
                                    onKeyDown={(e) => this.store.nameInput(e)}/>
                            </div>
                        </div>
                        <div className="manage-wrapper">
                            <span className="manage-btn" onClick={() => {
                                this.store.downloadExcel()}}>导出Excel表格</span>
                        </div>
                    </div>
                </div>
                <div className="orin-s-ordersplate-root">
                    <div className="content-new-wrapper">
                        <div className="content-header-title">
                            <div className="content-number title">
                            </div>
                            <div className="content-date title">
                                <span>日期</span>
                            </div>
                            <div className="content-name title">
                                <span>姓名</span>
                            </div>
                            <div className="content-phone title">
                                <span>手机号码</span>
                            </div>
                            <div className="content-identity title">
                                <span>身份</span>
                            </div>
                            <div className="content-version title">
                                <span>版本</span>
                            </div>
                            <div className="content-time title">
                                <span>时长</span>
                            </div>
                            <div className="content-money title">
                                <span>金额</span>
                            </div>
                            <div className="content-validity title">
                                <span>有效期</span>
                            </div>
                            <div className="content-pay title">
                                <span>支付</span>
                            </div>
                            <div className="content-more-btn title">
                                <span>备注</span>
                            </div>
                        </div>
                        <div className="content">
                            {
                                this.store.orderList.map((item, index) => {
                                    return (
                                        <div key={index} className="users-wrapper-pc">
                                            <div className="user-item-wrapper">
                                                <div className="content-number">
                                            <span className="text">
                                                {(this.store.currentPage * 2 - 2) * 10 + (index + 1)}
                                            </span>
                                                </div>
                                                <div className="content-date">
                                                    <p className="text">
                                                <span>
                                                    {$$.utils.getFormatAllTime2(item.createTime, true)}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-name">
                                                    <p className="text">
                                                <span>
                                                    {item.nickName}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-phone">
                                                    <p className="text">
                                            <span>
                                                {item.phone}
                                            </span>
                                                    </p>
                                                </div>
                                                <div className="content-identity">
                                                    <p className="text">
                                                <span>
                                                    {item.label || '收藏家'}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-version">
                                                    <p className="text">
                                                <span>
                                                    {item.recommend}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-time">
                                                    <p className="text">
                                                <span>
                                                    {item.time / 12}年
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-money">
                                                    <p className="text">
                                                <span>
                                                    {item.money/100}元
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-validity">
                                                    {
                                                        !!item.payTime && !!item.endTime &&
                                                        <p className="text">
                                                        <span className="time">
                                                        {$$.utils.getFormatAllTime3(item.payTime, true)
                                                        + ' - ' + $$.utils.getFormatAllTime3(item.endTime, true)}
                                                    </span>
                                                        </p>
                                                    }
                                                </div>
                                                <div className="content-pay">
                                                    <p className="text">
                                                <span>
                                                    {item.payWay}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-more-btn">
                                                    <p className="text">
                                                <span>
                                                    {item.remark}
                                                </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {
                    !this.store.firstRequest &&
                    <div className="manage-loading-wrapper">
                        <Spin spinning={!this.store.firstRequest} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }
                {
                    this.store.orderList.length === 0 && this.store.firstRequest &&
                    <Empty tips={'暂无订单记录'}/>
                }
                {
                    this.store.orderList.length > 0 &&
                    <div className="pagination-wrapper">
                        <div className="pagination-count">
                            总共{this.store.orderTotal}条数据，当前有{this.store.orderList.length}条
                        </div>
                        <Pagination
                            onChange={(current) => this.store.paginationChange(current)}
                            defaultPageSize={$$.SEM.ORDER_LIST_SIZE}
                            current={this.store.currentPage}
                            defaultCurrent={this.store.currentPage}
                            total={this.store.orderTotal}/>
                    </div>
                }
                {/*<div className={this.store.visible ? 'invite-mask show' : 'invite-mask hide'}>*/}
                    {/*<div className="invite-wrapper" onClick={(e) => e.stopPropagation()}>*/}
                        {/*<div className="invite-header">*/}
                            {/*<p>请选择时间区间</p>*/}
                            {/*<div className="icon-wrapper" onClick={(e) => this.store.closeTimeMody(e)}>*/}
                                {/*<ReIcon icon='window_closes' className='icon'/>*/}
                            {/*</div>*/}
                        {/*</div>*/}
                        {/*<div className="invite-content">*/}
                            {/*<div className="time-wrapper">*/}
                                {/*<div className="time-begin">*/}
                                    {/*<div className="time-input">*/}
                                        {/*<Datetime value={this.store.startTime}*/}
                                                  {/*locale="zh-cn"*/}
                                                  {/*dateFormat="YYYY-MM-DD"*/}
                                                  {/*inputProps={{placeholder: '开始时间'}}*/}
                                                  {/*onChange={(e) => this.store.startTimeChange(e)}/>*/}
                                        {/*{*/}
                                            {/*!!this.store.startTime &&*/}
                                            {/*<span className="close-right" onClick={() => this.store.clearStartTime()}>*/}
                                            {/*<ReIcon className='close-btn' icon="tubiao06"/>*/}
                                        {/*</span>*/}
                                        {/*}*/}
                                    {/*</div>*/}
                                {/*</div>*/}
                                {/*<span className="time-to">至</span>*/}
                                {/*<div className="time-end">*/}
                                    {/*<div className="time-input">*/}
                                        {/*<Datetime value={this.store.endTime}*/}
                                                  {/*locale="zh-cn"*/}
                                                  {/*dateFormat="YYYY-MM-DD"*/}
                                                  {/*inputProps={{placeholder: '结束时间'}}*/}
                                                  {/*onChange={(e) => this.store.endTimeChange(e)}/>*/}
                                        {/*{*/}
                                            {/*!!this.store.endTime &&*/}
                                            {/*<span className="close-right" onClick={() => this.store.clearEndTime()}>*/}
                                            {/*<ReIcon className='close-btn' icon="tubiao06"/>*/}
                                        {/*</span>*/}
                                        {/*}*/}
                                    {/*</div>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                            {/*<ReButton className="assign-btn" label={'确定'}*/}
                                      {/*onClick={(e) => this.store.confirmDownload(e)}/>*/}
                        {/*</div>*/}
                        {/*<div className="invite-footer">*/}
                            {/*{*/}
                                {/*this.store.downUrl &&*/}
                                {/*<a href={'https://' + this.store.downUrl} download="订单数据" className="download-wrapper">导出记录</a>*/}
                            {/*}*/}
                        {/*</div>*/}

                    {/*</div>*/}
                {/*</div>*/}
            </div>
        );
    }
}